<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>03_计算属性和监视</title>
</head>

<body>
  <!--
      1. 计算属性
        在computed属性对象中定义计算属性的方法
        在页面中使用{{方法名}}来显示计算的结果
      2. 监视属性:
        通过通过vm对象的$watch()或watch配置来监视指定的属性
        当属性变化时, 回调函数自动调用, 在函数内部进行计算
      3. 计算属性高级:
        通过getter/setter实现对属性数据的显示和监视
        计算属性存在缓存, 多次读取只执行一次getter计算
    -->
  <div id="app">
    <!-- v-bind是单向数据绑定 -->
    <!-- 姓: <input type="text" placeholder="First Name" :value="firstName" /><br />
    名: <input type="text" placeholder="Last Name" :value="lastName" /><br /> -->

    <!-- v-model是双向数据绑定 -->
    姓: <input type="text" placeholder="First Name" v-model="firstName" /><br />
    名: <input type="text" placeholder="Last Name" v-model="lastName" /><br />
    姓名1: <input type="text" placeholder="Full Name1" :value="fullName1" /><br />
    姓名2: <input type="text" placeholder="Full Name2" v-model="fullName2" /><br />


    <p>{{num}}</p>
    <button @click="handleClick">按钮</button>

    <p>{{person.age}}</p>
    <button @click="updateAge">按钮</button>
  </div>

  <script type="text/javascript" src="../js/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        firstName: 'yan',
        lastName: 'haijing',
        num: 0,
        person: {
          age: 0
        }
      },
      methods: {
        handleClick() {
          this.num++
        },
        updateAge() {
          this.person.age++
        }
      },
      /*
        计算属性：
          1. 用法 
            只读的计算属性
              computed: {
                xxx() {}
              }
            可读可写的计算属性
              computed: {
                xxx: {
                  get() {},
                  set() {}
                }
              }
          2. 特点：
            一旦依赖的数据发生变化，重新计算结果，重新渲染
            依赖的数据没有发生变化，使用之前的缓存（之前的计算结果）
          3. 作用：
            当data数据不能直接显示在页面上，需要经过计算（其他处理）后才能显示，使用计算属性
      
      */
      computed: {
        // 只读的计算属性
        // 不能修改
        fullName1() {
          /*
             vue中函数的this都指向实例对象
             有些属性 $xxx
              特殊作用的属性（未来研究）
             有些属性 _xxx
              私有属性：外面不能使用
             有些属性 xxx
              定义在data、methods、computed对象上的属性都会直接挂载到实例对象上（作为实例对象的直接属性）
              这个过程叫做数据代理
              作用：将来可以通过this直接访问这些数据(访问数据更加简单)
          */
          return this.firstName + ' ' + this.lastName
        },
        // 可读可写的计算属性
        fullName2: {
          get() {
            return this.firstName + ' ' + this.lastName
          },
          set(val) {
            const [firstName, lastName] = val.split(' ')
            this.firstName = firstName
            this.lastName = lastName
          }
        }
      },
      /*
        监视属性：
          1. 语法：
            watch: {
              xxx(newVal, oldVal) {},
              xxx: {
                handler(newVal, oldVal) {},
                immediate: true, // 一上来就要触发
                deep: true // 深度监视
              },
              'xxx.yyy'(newVal, oldVal) {}
            }
          2. 作用
            监视一个已存在的属性，当它的值发生变化时触发回调函数

        计算属性和监视属性区别：
            1. 计算属性会产生一个新的数据，监视属性只是监视一个已存在的属性
            2. 计算属性会有返回值，监视属性没有返回值
            3. 计算属性不能做异步操作，监视属性可以做异步操作
      */
      watch: {
        // 一上来不会触发
        // num(newVal, oldVal) {
        //   console.log(newVal, oldVal);
        // }
        // 如果希望一上来就要触发
        // num: {
        //   handler(newVal, oldVal) {
        //     console.log(newVal, oldVal);
        //   },
        //   immediate: true // 一上来就要触发
        // }

        // 可以监视对象中某个属性
        // 'person.age'(newVal, oldVal) {
        //   console.log(newVal, oldVal);
        // }

        // 监视对象，当对象里面的值发生变化需要深度监视才能检测到
        person: {
          handler(newVal, oldVal) {
            console.log(newVal, oldVal);
          },
          deep: true // 深度监视
        }
      }
    })
  </script>


  <!-- <script type="text/javascript">
    const person = {
      firstName: 'yan',
      lastName: 'haijing'
    }

    // 定义对象的属性 - 定义属性的属性（元属性）
    // 通过下面方法定义的属性，就会半透明的效果～
    Object.defineProperty(person, 'fullName', {
      value: 'yan haijing', // 属性值
      // 下面三个就是：属性的属性（元属性）
      writable: false, // 是否可写（是否可以修改属性的值）
      configurable: false, // 是否可重新配置或删除
      enumerable: false // 是否可枚举（遍历）
    })

    console.log(person);

    person.fullName = 'tao shujian'
    delete person.fullName

    for (const key in person) {
      console.log(key);
    }

    console.log(person);

  </script> -->

  <!-- <script type="text/javascript">
    const person = {
      firstName: 'yan',
      lastName: 'haijing'
    }

    // 定义对象的属性 - 定义属性的属性（元属性）
    Object.defineProperty(person, 'fullName', {
      get() { // 读取fullName属性时触发函数，get的返回值就是读取的值
        // this指向person
        return this.firstName + ' ' + this.lastName
      },
      set(val) { // 设置fullName属性值时触发函数
        // val就是设置的值 tao shujian
        const [firstName, lastName] = val.split(' ')
        this.firstName = firstName
        this.lastName = lastName
      }
    })

    // 读取fullName属性的值，触发get方法
    // get的返回值就是读取的值
    console.log(person.fullName);

    // 设置fullName属性的值，触发set方法
    person.fullName = 'tao shujian'

    console.log(person);

  </script> -->
</body>

</html>